<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="demo">
        <ph-button-group :container="true">
          <ph-button type="success" @click="onClick('success')"
            >success</ph-button
          >
          <ph-button type="danger" @click="onClick('danger')">danger</ph-button>
          <ph-button type="warning" @click="onClick('warning')"
            >warning</ph-button
          >
          <ph-button type="info" @click="onClick('info')">info</ph-button>
          <ph-button @click="onClick('light')">light</ph-button>
        </ph-button-group>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance } from "vue";
import { PhView, PhTab, PhTabPanel, PhButtonGroup, PhButton } from "@/index";
import { PhMsgType } from "@/index";
export default defineComponent({
  components: {
    PhView,
    PhTab,
    PhTabPanel,
    PhButtonGroup,
    PhButton,
  },
  setup() {
    const ins = getCurrentInstance();
    const onClick = (type: PhMsgType) => {
      ins?.proxy?.$phMessage(type, {
        type,
        clickable: true,
      });
    };
    return { onClick };
  },
});
</script>
